<template>
    <div>
        <ul class="clearfix" v-if="list !=undefined  &&  list.length > 0">
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <li class="clearfix pay-left-box b-g-f" v-for="(item,index) in list" :key="index" @click="orderDetail(item.id)">
                    <div class="order-start">
                        <span class="order-start-id">订单编号:{{item.order_sn}}</span>
                        <span class="order-start-name">{{msg}}</span>
                    </div>
                    <img :src="item.proList[0].photo_s" alt="">
                    <div class="pay-right-box order-bottom">
                        <span class="pay-right-title">{{item.proList[0].name}}</span>
                        <span class="pay-right-num">
                            ￥{{item.price}}
                            <em class="pay-num">X{{item.buy_num}}</em>
                        </span>
                    </div>
                    <div class="pay-right-heji-box order-bottom">
                        <span class="pay-right-heji">
                            共{{item.buy_num}}件商品
                            <em class="pay-heji">合计：￥{{item.price}}</em>
                        </span>
                    </div>
                    <div class="order-button" v-if="status == 30" @click.stop="logistics(item)">
                        <span class="order-button1">查看物流</span>
                    </div>
                    <div class="order-button" v-if="status == 10">
                        <span class="order-button1" @click.stop="quxiao(item.id)">取消订单</span>
                        <span class="order-button2" @click.stop="orderGetJsApiParam(item)">付款</span>
                    </div>
                </li>
            </van-list>
        </ul>
        <div class="null-gwc" v-else>
            <img src="../../../../static/img/order.png" alt="">
            <span class="gwc-tit">您还没有相关订单</span>
        </div>
    </div>
</template>
<script>
import { Dialog, Toast } from 'vant'
export default {
    props:['status',],
    data(){
        return{
            msg:'',
            loading:false,
            finished:false,
            list:[],
            page:0
        }
    },
    watch:{},
    mounted(){
        if(this.status == 10){
            this.msg = '等待买家付款'
        }else if(this.status == 20){
            this.msg = '买家已付款'
        }else if(this.status == 30){
            this.msg = '等待收货'
        }else{
            this.msg = '交易成功'
        }
        // this.onLoad()
    },
    methods:{
        // 调用父组件的方法
        onLoad(){
            this.orderIndex()
        },
        // 订单列表
        orderIndex(){
            this.page++
            this.$api.shopping.orderIndex({page:this.page,status:this.status}).then(resp=>{
                if(resp.code == 1){
                    this.loading = false
                    if(resp.data.orderList != undefined){
                        resp.data.orderList.forEach(e=>{
                            this.list.push(e)
                        })
                    }else{
                        this.finished = true
                    }
                }
            })
        },
        // 跳转到详情
        orderDetail(id){
            this.$router.push({
                name:'orderDetail',
                params:{
                    orderId:id
                }
            })
        },
        // 取消订单
        quxiao(id){
            Dialog.confirm({
                title: '标题',
                message: '您确定要取消此订单吗？',
                cancelButtonText:'确定',
                confirmButtonText:'取消'
            }).then(() => {
                // on confirm
            }).catch(() => {
                this.$api.shopping.orderEdit({order_id:id}).then(resp=>{
                    if(resp.code == 1){
                        Toast('取消成功')
                        this.$emit('orderIndex',this.status)
                    }
                })
            });
        },
        // 查看物流
        logistics(item){
            window.location.href=`https://m.kuaidi100.com/index_all.html?type=${item.express_code}&postid=${item.express_num}&callbackurl=http://192.168.1.175:8080/shop/order?taber=30`
        },
        // 微信支付生成
        orderGetJsApiParam(item){
            let parmes = {
                total_amount:item.amount,
                order_sn:item.orderId
            }
            this.$api.shopping.orderGetJsApiParam(parmes).then(resp=>{
                if(resp.code == 1){
                    this.wxPay(resp.data)
                }else{
                    Toast(resp.msg)
                }
            })
        },
        wxPay(data){
            WeixinJSBridge.invoke(
                'getBrandWCPayRequest',{
                    "appId": data.appId,     //公众号名称，由商户传入     
                    "timeStamp": data.timeStamp,         //时间戳，自1970年以来的秒数     
                    "nonceStr": data.nonceStr, //随机串     
                    "package": data.package,     
                    "signType": data.signType,         //微信签名方式：     
                    "paySign": data.paySign //微信签名 
                },
                (res)=>{
                    if(res.err_msg == "get_brand_wcpay_request:ok" ) {
                        Toast('支付成功')
                    } else if (res.err_msg == "get_brand_wcpay_request:cancel" ) {
                        Toast('已取消支付')
                    } else {
                        Toast(res.err_msg)
                    }
                }
            )
        }
    }
}
</script>

